<template>
	<div class="page-layout">
		<div class="page-hd">
			<!-- 形象展示 -->
			<div class="hd-left">
				<img
					:src="safeResolve('/images/woman.png')"
					class="logo"
					alt="Vite logo"
				/>
			</div>
			<!-- 技术栈 -->
			<div class="hd-right"><SpriteText /></div>
		</div>
		<div class="page-bd">
			<!-- 工作经历 -->
			<div><Experience /></div>
			<!-- 项目经历 -->
			<div><Projects /></div>
		</div>
	</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.page-layout {
	display: flex;
	padding: 0 10%;
	flex-direction: column;
	.page-hd {
		width: 100%;
		height: 400px;
		display: flex;
		align-items: center;
		position: relative;
		background-image: url(/images/MIUI03.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		.hd-left {
			width: 40%;
			height: 100%;
		}
		.hd-right {
			flex: 1;
			height: 100%;
			overflow: hidden;
		}
	}
	.page-bd {
		padding: 24px;
	}
}

.logo {
	width: auto;
	height: 100%;
	padding: 1.5rem;
	will-change: filter;
	transition: filter 300ms;
}
.body-left .logo {
	width: 320px;
	height: auto;
	padding: 0;
}
.logo:hover {
	filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
	filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
